<template>
    <div class="credit">
        <div class="credit-header">
            <i class="iconfont icon-fanhui" @click="goBack"></i>
            <div class="credit-header-progress">
                <span>信用认证</span>
                <mt-progress :value="20" :bar-height="5"></mt-progress>
            </div>
        </div>
        <div class="credit-content">
            <ul>
                <li v-for="(item,index) in dataList" :key="index" @click="goPage(item.url)">
                    <div class="credit-content-img">
                        <img :src="item.imgUrl"/>
                    </div>
                    
                    <span>{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: "credit",
    data() {
        return {
            dataList:[{
                imgUrl:'static/img/shimingrenzheng.png',
                name:'实名认证',
                url:'/main/mine/certification/namecertification'
            },{
                imgUrl:'static/img/gerenxinxi-.png',
                name:'个人信息',
                url:'/mine/main/certification/personmessage'
            },{
                imgUrl:'static/img/yunyingshangrenzhen.png',
                name:'运营商认证',
                url:''
            },{
                imgUrl:'static/img/zhimaxinyong.png',
                name:'芝麻信用',
                url:''
            },{
                imgUrl:'static/img/wodegongjijin.png',
                name:'我的公积金',
                url:''
            },{
                imgUrl:'static/img/si.png',
                name:'我的社保',
                url:''
            },{
                imgUrl:'static/img/jd.png',
                name:'京东认证',
                url:''
            },{
                imgUrl:'static/img/taobao.png',
                name:'淘宝认证',
                url:''
            },{
                imgUrl:'static/img/xinxiang.png',
                name:'邮箱认证',
                url:''
            },]
        }
    },
    mounted(){
        document.setTitle('信用认证');
    },
    methods:{
        goBack(){
            this.$router.go(-1);
        },
        goPage(url){
            this.$router.push({path:url})
        }
    }
}
</script>
<style lang="scss">
@import '../../../scss/variable/base.scss';
    .credit{
        &-header{
            width: 100%;
            height: 6.02rem;
            background: url('../../../assets/jianbianbg.png');
            position: relative;
            background-size:100% 100%; 
            .iconfont{
                position: absolute;
                left:0.4rem;
                top:0.4rem;
                font-size: 0.5rem;

            }
            &-progress{
                position: absolute;
                left:50%;
                top:70%;
                transform: translate(-50%,0%);
                width: 1.56rem;
                height: 0.8rem;
                font-size: 0.32rem;
                .mt-progress-runway{
                    height: 0.05rem !important;
                }
                .mt-progress-progress{
                    height: 0.05rem !important;
                    background-color:$primaryColor;
                }
            }
        }
        &-content{
            box-sizing: border-box;
            margin-top: 0.27rem;
            padding: 0 0.4rem;
            ul{
                width: 100%;
                overflow: hidden;
                li{
                    width: 2.88rem;
                    background:#fff;
                    height: 2.88rem;
                    float: left;
                    margin-left: 0.28rem;
                    margin-bottom: 0.28rem;
                    span{
                        font-size: 0.36rem;
                    }
                    &:nth-of-type(1), &:nth-of-type(4), &:nth-of-type(7){
                        margin-left: 0;
                    }
                }
            }
            &-img{
                width: 100%;
                height: 1.5rem;
                line-height: 1.5rem;
                margin-bottom: 0.25rem;
                img{
                    margin-top: 0.8rem;
                    // width: 0.6rem;
                    
                    height: 0.6rem;
                }
                
            }
        }
    }
</style>


